<script setup lang='ts'>
import { ref, watch } from 'vue'
import { useMusicStore } from '@/store/listMusic'
interface Props {
  lyricMusic: string
}
const props = defineProps<Props>()
const useStore = useMusicStore()
const curM = ref('')
const curS = ref('')
const curSs = ref('')
const seconds = ref('')
const gc = ref(null)
const gcStyleIndex = ref(0)

const ci = props.lyricMusic.split('\n')
const zero = (n :number) => n < 10? '0' + n : String(n)
// const time = ci.map(v => v.slice(1, 9).split(':'))
const time = ci.map(v => v.slice(1, 6))
const scroll  = ref(0)
useStore.audioContext.onTimeUpdate(() => {
  curM.value = zero(Math.floor(useStore.audioContext.currentTime/60%60))
  curS.value = zero(Math.floor(useStore.audioContext.currentTime%60))
  seconds.value = zero(Math.floor(useStore.audioContext.currentTime%60%1*1000))
  curSs.value = curM.value.toString() + ':' + curS.value.toString()

  ci.forEach( (item,i) => {
    if (item.slice(1,6) === curSs.value ) {
      console.log(item.slice(1,6),curSs.value,seconds.value)
      scroll.value = (i)*30-100
      gcStyleIndex.value = i
    }
    // if ( item.length > 11 && parseInt(seconds.value) >= parseInt(item.slice(8,11)) && parseInt(seconds.value) < parseInt(ci[i+1].slice(8,11)) ) {
    //   console.log(parseInt(item.slice(8,11)))
    // }
  })
})



</script>

<template>
<view class="box">
  <view class="top"></view>
  <scroll-view class="lyinc" show-scrollbar="false" scroll-y="true" :scroll-top="scroll" scroll-with-animation="true">
    <view
      v-for="(item,i) in ci"
      :key="item"
      :class="{'active': i === gcStyleIndex}"
      >
      {{ item.slice(item.indexOf(']')+1) }}
      <!-- {{ item }} -->
    </view>
  </scroll-view>
</view>
</template>

<style scoped lang="scss">

.box{
  width: 100%;
  height: 100%;
    display: flex;
    flex-direction: column;
}
  .top{
    width: 100%;
    height: 250rpx;
  }
  .lyinc{
    width: 100%;
    flex-shrink: 0;
    height: 554rpx;
    color: #fff;
    overflow: hidden;
    // padding-right:10px;
    wrap: wrap;
    display: block;
    padding:0 50px;
    box-sizing: border-box;
    .active {
      // background-color: #ccc;
      color: red;
      font-weight: bold;
      font-size: 18px;
      font-family: "楷体";
      font-style: italic;
      text-shadow: 1px 1px 1px #000;
      margin: 10px 0;
      // padding: 0 5px;
      // font-family: "Arial";
      // font-family: "微软雅黑";
      // font-family: "黑体";
      // font-family: "宋体";
      // font-family: "Times New Roman";
      // font-family: "Arial Black";
      // font-family: "Verdana";
      // font-family: "Tahoma";
      // font-family: "Helvetica";
      // font-family: "Lucida Sans Unicode";
      // font-family: "Lucida Grande";
      // font-family: "Lucida Sans";
      // font-family: "Arial Narrow";
      // font-family: "Arial Rounded MT Bold";
      // font-family: "Arial Unicode MS";
      // font-family: "Arial Black";
    }
    view{
      text-align: center;
      line-height: 60rpx;
      font-size: 12px;
    }
  }
</style>
